<script setup lang="ts">
import {useStorage} from "@/hooks/web/useStorage";
import {reactive, ref, onMounted, onUnmounted} from 'vue'
const {push, addRoute} = useRouter()
import {RouteRecordRaw, useRouter} from "vue-router";
import {usePermissionStore} from "@/store/modules/permission";
import {ElMessage} from "element-plus";
import {getOrder, orderResult, orderWx} from "@/api/order";
const {setStorage} = useStorage()
const permissionStore = usePermissionStore()
const loading = ref()
const payLoading = ref()
const code = ref()
const timer = ref()
const orderData = reactive({
  order_no: '',
  code_url: '',
  name: '',
  idnum: '',
  phone: '',
})
const handlePay = async () => {
  const routers = ['/']
  setStorage('roleRouters', routers)
  await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})
  permissionStore.getAddRouters.forEach((route) => {
    addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
  })
  permissionStore.setIsAddRouters(true)
  push({path: '/'})
}

const toPay = () => {
  window.location.href = orderData.code_url
}

//判断是否微信内置浏览器
const isWeiXin = () => {
  var ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  } else {
    return false;
  }
}


const fetchData = async () => {
  try {
    loading.value = true
    let method  = 'h5'
    if (isWeiXin()){
      method = 'web'
    }
    let res = await getOrder({
      method: method,
    })
    console.log(res);
    if (res) {
      Object.assign(orderData, res.data)
      if (res.data.pay_status == 1) {
        await handlePay()
      } else {
        timer.value = setInterval(fetchOrder, 3000)
      }
    }
  } finally {
    loading.value = false
  }
}

const fetchOrder = async () => {
  let res = await orderResult({order_no: orderData.order_no})
  console.log(res);
  if (res) {
    if (res.data.code == 1) {
      clearInterval(timer.value)
      await handlePay()
    }
  }
}

onMounted(() => {
  fetchData()
})

onUnmounted(() => {
  clearInterval(timer.value)
})

</script>

<template>
  <div class="pay-base">
    <el-row justify="center" v-loading="payLoading"
            element-loading-text="正在发起微信支付...">
      <el-col :span="18" class="pay-wrap" :xs="24" v-loading="loading">
        <el-form label-width="100px" label-position="left">
          <el-form-item label="姓名:">
            <span>{{ orderData.name }}</span>
          </el-form-item>
          <el-form-item label="身份证号码:">
            <span>{{ orderData.idnum }}</span>
          </el-form-item>
          <el-form-item label="手机号码:">
            <span>{{ orderData.phone }}</span>
          </el-form-item>
          <el-form-item label="缴费项目:">
            <span>考试费</span>
          </el-form-item>
          <el-form-item label="缴纳金额:">
            <span style="color: #F45D38;font-weight: bold">¥500</span>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="18" class="pay-wrap" :xs="24">
        <el-form label-width="100px" label-position="left">
          <div>
            支付方式
          </div>
          <el-divider></el-divider>
          <div class="scan" v-if="isWeiXin()">
            <span>暂不支持微信浏览器发起支付,请使用其他浏览器打开本网址</span>
          </div>
          <div class="wx-method" v-else>
            <div class="icon">
              <img src="../../assets/imgs/wx.png" alt="">
              <span>微信支付</span>
            </div>
            <img class="sele" src="../../assets/imgs/sele.png" alt="">
          </div>
          <div class="notice">
            *提示: 缴纳考试费才可以参加朗斯在线测评考试
          </div>
        </el-form>
      </el-col>
      <div class="toPay" @click="toPay" v-if="!isWeiXin()">立 即 支 付</div>
    </el-row>
  </div>
</template>

<style scoped lang="less">
.toPay {
  background-color: #0C83AB;
  color: #fff;
  width: 100%;
  margin: 20px auto 50px;
  height: 42px;
  border-radius: 30px;
  font-size: 15px;
  text-align: center;
  line-height: 42px;
}

.notice {
  font-size: 13px;
  color: #F56C6C;
}

.pay-wrap {
  padding: 20px 15px 40px 15px;
  height: auto;
  margin-bottom: 15px;
  font-size: 15px;
  border-radius: 8px;
  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;

  .wx-method {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .icon {
      font-size: 15px;
      display: flex;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }

    .sele {
      width: 20px;
      height: 20px;
    }
  }
  .scan{
    span:nth-child(1){
      font-size: 15px;
      font-weight: bold;
      margin-right: 5px;
    }
    .el-image{
      margin-top: 10px;
    }
    span:nth-child(2){
      font-size: 13px;
      color: #909399;
    }
  }
}

.pay-type {
  width: 110px;
  height: 34px;
  border-radius: 5px;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-size: 14px;
  background-color: #4CAE53;

  img {
    width: 15px;
  }
}


/deep/ .el-form-item__label {
  font-size: 15px;
}

/deep/ .el-form-item__content {
  font-size: 15px;
  color: #909399;
  justify-content: right;
}
</style>